<template>
  <div class="dashboard">
    <!-- 1.顶部数据统计 -->
    <el-row :gutter="10">
      <template v-for="item in topPanelData" :key="item.title">
        <el-col :md="12" :lg="8" :xl="8">
          <statistical-panel :panelData="item" />
        </el-col>
      </template>
    </el-row>

    <!-- 2.中间图标 -->
    <el-row :gutter="10">
      <el-col :span="12">
        <ft-card
          title="mella thermometer UV"
          pageName="uvPage"
          showSelect="true"
        >
          <line-echart v-bind="mellaUV"></line-echart>
          <el-button class="ftbtn" type="primary" round @click="downloadCSV"
            >Download</el-button
          >
        </ft-card>
      </el-col>
      <el-col :span="12">
        <ft-card
          title="mella thermometer MacUV"
          pageName="muvPage"
          showSelect="true"
        >
          <line-echart v-bind="mellaMUV"></line-echart>
          <el-button class="ftbtn" type="primary" round @click="downloadMCSV"
            >Download</el-button
          >
        </ft-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store'

import FtCard from '@/base-ui/card'
import StatisticalPanel from '@/components/statistical-panel'
import { LineEchart } from '@/components/page-charts'

export default defineComponent({
  name: 'dashboard',
  components: {
    FtCard,
    StatisticalPanel,
    LineEchart
  },
  setup() {
    // 1.发起数据统计的网络请求
    const store = useStore()
    store.dispatch('general/getAnalysisDataAction')

    // 2.获取顶部PanelData
    const topPanelData = computed(() => store.state.general.topPanelDatas)

    const mellaUV = computed(() => {
      const mellaLine: any = store.state.general.mellaUV
      const labels: string[] = mellaLine.xAxis
      const values: any = mellaLine.series
      return { labels, values }
    })

    const mellaMUV = computed(() => {
      const mellaMLine: any = store.state.general.mellaMUV
      const labels: string[] = mellaMLine.xAxis
      const values: any = mellaMLine.series
      return { labels, values }
    })

    const downloadCSV = () => store.dispatch('general/downloadCSVAction')
    const downloadMCSV = () => store.dispatch('general/downloadMCSVAction')

    return {
      topPanelData,
      mellaUV,
      mellaMUV,
      downloadCSV,
      downloadMCSV
    }
  }
})
</script>

<style scoped lang="less">
.dashboard {
  background-color: #f5f5f5;

  .ftbtn {
    float: right;
  }
}
</style>
